<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <div class="layui-tab">
        <ul class="layui-tab-title">
          <li class="layui-this">待完成</li>
          <li>已提交</li>
        </ul>
        <div class="layui-tab-content">
          <!-- 待完成 -->
          <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="test1" lay-filter="test"></table>

            <script type="text/html" id="toolbarDemo">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
              </div>
            </script>

            <script type="text/html" id="barDemo">
              <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
          </div>
          <!-- 已提交 -->
          <div class="layui-tab-item">
            <table class="layui-hide" id="test2" lay-filter="test"></table>
            <script type="text/html" id="toolbarDemo">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
              </div>
            </script>

            <script type="text/html" id="barDemo">
              <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
          </div>

        </div>
      </div>
</body>
<script src="../layui/layui.js"></script>
<script>
     var datas = [{
        "examname":"Java",
        "examtime":"2020-05-01",
        "examduration":"40分钟",
        "totalscore":"100.00分",
        "passscore":"60.00分",
        "examcs":"3次"
      },
      {
        "examname":"JavaWeb",
        "examtime":"2020-06-01",
        "examduration":"40分钟",
        "totalscore":"100.00分",
        "passscore":"60.00分",
        "examcs":"3次"
      }
    ];
    layui.use('element', function () {
      var element = layui.element;

    });
    layui.use('table', function () {
      var table = layui.table;

      table.render({
        elem: '#test1',
        url: '',
        toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
        defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
          title: '提示',
          layEvent: 'LAYTABLE_TIPS',
          icon: 'layui-icon-tips'
        }],
        cols: [ //表头
          [{
              type: 'checkbox',
              fixed: 'left'
            }, //左侧全选
            {
              field: 'examname',
              width: '20%',
              title: '考试名称',
              sort: true
            }, {
              field: 'examtime',
              width: '20%',
              title: '考试时间'
            }, {
              field: 'examduration',
              width: '10%',
              title: '考试时长',
              sort: true
            },{
              field: 'totalscore',
              width: '10%',
              title: '卷面总分'
            }, {
              field: 'passscore',
              width: '10%',
              title: '及格分',
              sort: true
            }, {
              field: 'examcs',
              width: '10%',
              title: '考试次数',
              sort: true
            }, {
              fixed: 'right',
              title: '操作',
              toolbar: '#barDemo',
              width: '20%'
            }
          ]
        ],
        data: datas,
        page: true
      });

      //头工具栏事件
      table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
          case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
            break;
          case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('选中了：' + data.length + ' 个');
            break;
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全选' : '未全选');
            break;

            //自定义头工具栏右侧图标 - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('这是工具栏右侧自定义的一个图标按钮');
            break;
        };
      });

      //监听行工具事件
      table.on('tool(test)', function (obj) {
        var data = obj.data;
        //console.log(obj)
        if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
            obj.del();
            layer.close(index);
          });
        } else if (obj.event === 'edit') {
          layer.prompt({
            formType: 2,
            value: data.email
          }, function (value, index) {
            obj.update({
              email: value
            });
            layer.close(index);
          });
        } else if (layEvent === 'detail') {
          layer.msg('查看操作');
        }
      });
    });
</script>
</html>